<template>
 <div class="list">
    <HeadTitle :title="title"></HeadTitle>
    <div>
      <van-tabs v-model:active="activeName" @click-tab="print" class="tabs">
        <van-tab
          v-for="item in navList"
          :key="item.id"
          :name="item.name"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="banner" v-if="currentNav">
      <p class="title">{{ currentNav.name }}</p>
      <div class="desc">{{ currentNav.front_desc }}</div>
    </div>
    <ul>
      <li
      v-for="item in list" :key="item.id" @click="goDeatil(item.id)">
        <img :src="item.list_pic_url" alt="" />
        <p class="title">{{ item.name }}</p>
        <p class="price">￥{{ item.retail_price }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'

import { categoryNav, goodsList } from '@/api/category/list'
import { ref } from 'vue'
import HeadTitle from '@/components/title.vue'
const route = useRoute()
const router = useRouter()
const navList = ref()
const currentNav = ref()
const activeName = ref('床垫')
const list = ref()
const idx = ref('')

// const active = ref()
const title = ref('分类')
console.log(route)
// 导航栏
categoryNav({ id: route.query.id }).then(res => {
  // console.log(res)
  navList.value = res.navData
  currentNav.value = res.currentNav
  activeName.value = res.currentNav.name
})
// 商品列表
goodsList({ categoryId: route.query.id }).then(res => {
  // console.log(res)
  list.value = res.data
})
// 跳转详情
const goDeatil = (id) => {
  router.push({ path: '/cagetory/list/info', query: { id } })
}
// 点击标签切换
const print = (val) => {
  // console.log(val)
  idx.value = navList.value.find(ele => ele.name === val.name).id
  goodsList({ categoryId: idx.value }).then(res => {
    // console.log(res)
    list.value = res.data
    currentNav.value = res.currentNav
  })
}

</script>

<script>
export default {
  name: 'cageList'
}
</script>

<style lang="scss" scoped>
.list {
  padding-top: 150px;
  .tabs{
    position: fixed;
    top: 90px;
    left: 0;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      img {
        width: 350px;
        height: 350px;
      }
      .title {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin-left: 22px;
      }
      .price {
        font-size: 26px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 400;
        margin-left: 22px;
      }
    }
  }
  .banner {
    width: 710px;
    height: 150px;
    background-color: #ebdcad;
    margin: 26px auto;
    text-align: center;
    p {
      font-size: 32px;
      color: #000000;
      letter-spacing: 0;
      font-weight: 500;
      padding-top: 29px;
    }
  }
}
</style>
